<template>

<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">

<el-form-item label="班级名称" prop="className">
  <el-input
    v-model="queryParams.className"
    placeholder="请输入班级名称"
    clearable
    size="small"
    style="width: 180px"
    @keyup.enter.native="handleQuery"
  />
</el-form-item>

<el-form-item>
  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>

<el-row :gutter="10" class="mb8">
  <el-col :span="1.5">
        <download-excel
            class="export-excel-wrapper"
            :data="wordList"
            :fields="json_fields"
            :header="excelTitle"
            name="APP安装情况信息.xls"
            
            >
        <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
        <el-button type="warning" icon="el-icon-download" size="mini">导出</el-button>
        </download-excel>
      </el-col>
  </el-row>

<el-table v-loading="loading" :data="classInstallList" show-summary :summary-method="getSummaries">
      <el-table-column label="序号" align="center" type="index" />
      <el-table-column label="班级名称" align="center" prop="className" :show-overflow-tooltip="true" />
      <el-table-column label="班主任" align="center" prop="classTeacherName" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          {{ getTeacherName(scope.row.classTeacherId) }}
        </template>
      </el-table-column>
      <el-table-column label="班级人数" align="center" prop="personCount"/>
      <el-table-column label="班级年级" align="center" prop="classGrade" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
            {{getDictLabel(classGradeList,scope.row.classGrade)}}
        </template>
      </el-table-column>

      <el-table-column label="是否毕业" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.isGraduation==1?'已毕业':'未毕业' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学生安装人数" align="center" prop="stuInstall">
        <template slot-scope="scope">
              <el-link type="primary" @click="handleIntalledStudent(scope.row)" >{{scope.row.stuInstall}}</el-link>
          </template>
        </el-table-column>
      <el-table-column label="学生未安装人数" align="center" prop="stuUninstall">
        <template slot-scope="scope">
              <el-link type="primary" @click="handleUnIntalledStudent(scope.row)" >{{scope.row.stuUninstall}}</el-link>
          </template>
        </el-table-column>
      <el-table-column label="家长安装人数" align="center" prop="guaInstall">
        <template slot-scope="scope">
              <el-link type="primary" @click="handleInstalledGua(scope.row)" >{{scope.row.guaInstall}}</el-link>
          </template>
        </el-table-column>
      <el-table-column label="家长未安装人数" align="center" prop="guaUninstall">
        <template slot-scope="scope">
              <el-link type="primary" @click="handleUnInstalledGua(scope.row)" >{{scope.row.guaUninstall}}</el-link>
          </template>
        </el-table-column>

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="班级学生信息" :visible.sync="studentDialogVisible">
      <el-table :data="studentList" style="width: 100%"  v-loading="studentLoading" >
        <el-table-column prop="studentId" label="学号"  align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="name" label="姓名"  align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="status" label="状态"  align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <label v-if="scope.row.status==0">无效</label>
            <label v-if="scope.row.status==1">有效</label>

          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="130"  align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="gender" label="性别"  align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <label v-if="scope.row.gender==0">女</label>
            <label v-if="scope.row.gender==1">男</label>
          </template>
        </el-table-column>
        
        <el-table-column prop="entranceDate" label="入学年月" width="180"  align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
            <span>{{ parseTime(scope.row.entranceDate) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="className" label="班级" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        
      </el-table>

    </el-dialog>

    <el-dialog title="学生家长信息" :visible.sync="guaDialogVisible">
      <el-table :data="guaList" style="width: 100%"  v-loading="guaLoading" >
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column prop="name" label="学生姓名"  align="center" :show-overflow-tooltip="true"/>
        <el-table-column prop="guardianName" label="监护人姓名"  align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="relationOfGuardian" label="监护人与学生关系" align="center" :show-overflow-tooltip="true">
            </el-table-column>
        <el-table-column prop="guardianPhoneNumber" label="监护人手机号"  align="center" :show-overflow-tooltip="true">
        </el-table-column>
        
      </el-table>
    </el-dialog>
    </div>
    
</template>

<script>
  import { findClassAppsInstallPageList, getStudentsInfoByType } from "@/api/monitor/appsinstall";
  import { getClassTeacherList } from "@/api/system/user";

export default {
 name: "AppsInstall",
 data() {
    return {
     // 遮罩层
     loading: true,
     total: 0,
     classInstallList: [],
     // 班主任
      userOptions: [],
      // 状态数据字典
      statusOptions: [],
      // 班级所属部门
      classDeptOptions: [],
      classGradeList:[],
      guaList:[],
      studentList:[],
      studentTotal:[],
      studentParam:{
        pageSize:10,
        pageNum:1
      },
      queryType: {
        studentInstall: '1',
        studentUnInstall: '2',
        parentsInstall: '3',
        parentsUninstall: '4'
      },
         // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        className: undefined,
        classDept:undefined
      },
      studentDialogVisible:false,
      studentLoading:false,
      guaDialogVisible:false,
      guaLoading:false,
      wordList:[],
      exportDataList:[],
      excelTitle:'APP安装信息',
      json_fields:{
        "班级名称":"className",
        "班主任":"classTeacherName",
        "班级人数":"personCount",
        "班级年级":"classGrade",
        "是否毕业":"certificateType",
        "学生安装人数":"stuInstall",
        "学生未安装人数":"stuUninstall",
        "家长安装人数":"guaInstall",
        "家长未安装人数":"guaUninstall",
      }
    };
 },
 created() {
    this.getClassTeacherList();
    this.getDicts("class_dept").then(response => {
      this.classDeptOptions = response.data;
    });
    this.getDicts("class_grade").then(response => {
      this.classGradeList = response.data;
    });
    this.getList();
    this.getExportData();
 },
 methods: {
    getTeacherName(val){
      for(let i=0;i<this.userOptions.length;i++){
        if(this.userOptions[i].username==val){
          return this.userOptions[i].sysuName
        }
      }
    },
    getClassTeacherList(){
      getClassTeacherList().then(response => {
        this.userOptions = response.data;
      });
    },
    getDictLabel(list,value){
       for(let i=0;i<list.length;i++){
        if(list[i].dictValue==value){
          return list[i].dictLabel
        }
       }
    },
        // 字典设备状态字典翻译
    classDeptFormat(row, column) {
      return this.selectDictLabel(this.classDeptOptions, row.classDept);
    },
    /** 查询班级安装情况列表 */
    getList() {
      this.loading = true;
      findClassAppsInstallPageList(this.queryParams).then(response => {
          this.classInstallList = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
    handleIntalledStudent(row){
       this.studentDialogVisible = true
       this.studentLoading = true
       this.studentList = row.installStus
       this.studentLoading = false
    },
    handleUnIntalledStudent(row){
       this.studentDialogVisible = true
       this.studentLoading = true
       this.studentList = row.unInstallStus
       this.studentLoading = false
    },
    handleInstalledGua(row) {
        this.guaDialogVisible = true
       this.guaLoading = true
       this.guaList = row.installGuas
       this.guaLoading = false
    },
    handleUnInstalledGua(row) {
        this.guaDialogVisible = true
       this.guaLoading = true
       this.guaList = row.unInstallGuas
       this.guaLoading = false
    },
       /** 搜索按钮操作 */
       handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if (index > 5) {
            const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
        }
        }
        });

        return sums;
    },
    getExportData() {
      findClassAppsInstallPageList({pageNum:1,pageSize:10000}).then(response => {
      this.wordList = [],
      this.exportDataList =  JSON.parse(JSON.stringify(response.data.list));
      for(let i=0;i<this.exportDataList.length;i++){
        this.wordList[i]=this.exportDataList[i]
        this.wordList[i].classTeacherName = this.getTeacherName(this.exportDataList[i].classTeacherId)
        this.wordList[i].certificateType = this.exportDataList[i].isGraduation==1?'已毕业':'未毕业'
        
        this.wordList[i].entranceDate = this.parseTime(this.exportDataList[i].entranceDate)
        this.wordList[i].classGrade = this.getDictLabel(this.classGradeList,this.exportDataList[i].classGrade)
      }
        }
      );
    }
 }
};
</script>
